<template>
   <a-form-model :model="form" ref="ruleForm" :label-col="{span:4}" :wrapper-col="{span:14}"
    class="form-container"
    :rules="rules"
    >
    <a-form-model-item label="商品售价" prop="price" required>
      <a-input v-model="form.price" />
    </a-form-model-item>
    <a-form-model-item label="商品折扣价" prop="price_off">
      <a-input v-model="form.price_off" />
    </a-form-model-item>
    <a-form-model-item label="商品库存" prop="inventory" required>
      <a-input v-model="form.inventory" />
    </a-form-model-item>
     <a-form-model-item label="计量单位" prop="unit" required>
      <a-input v-model="form.unit" />
    </a-form-model-item>
    <a-form-model-item label="商品相册" prop="images">
      <a-upload
      :action="'https://mallapi.duyiedu.com/upload/images?appkey=' + $store.state.userInfo.appkey"
      list-type="picture-card"
      :file-list="fileList"
      @preview="handlePreview"
      @change="handleChange"
      name='avatar'
    >
      <div v-if="fileList.length < 8">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          Upload
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    </a-form-model-item>
    <a-form-model-item  prop="status" :wrapper-col="{ span: 14, offset: 4 }" required>
      <a-checkbox v-model="status" @change="checkboxChange">
    是否上架
  </a-checkbox>
</a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" >
      <a-button type="primary" @click="back">
        上一步
      </a-button>
      <a-button type="primary" :style="{ marginLeft: '10px' }" @click="done">
        完成
      </a-button>

    </a-form-model-item>
  </a-form-model>
</template>

<script>

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  props: ['form'],
  data() {
    return {
      rules: {},
      fileList: [],
      previewVisible: false,
      previewImage: '',

    };
  },
  created() {
    console.log(this.form);
    this.fileList = this.form.images.map((item, index) => ({
      uid: index,
      name: `${index}image.png`,
      status: 'done',
      url: item,
    }));
  },
  computed: {
    status: {
      get() {
        return Boolean(this.form.status);
      },
      set(val) {
        return val;
      },

    },
  },
  methods: {
    done() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('done', this.form);

          return true;
        }
        console.log('error submit!!');
        return false;
      });
    },
    back() {
      this.$emit('back');
    },
    async handlePreview(file) {
      const obj = file;
      if (!file.url && !file.preview) {
        obj.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ file, fileList }) {
      // console.log('file', file);
      // 把url加到form里去
      //   console.log(fileList);
      //   console.log(event);

      if (file.status === 'done') {
        this.form.images.push(file.response.data.url);
      } else if (file.status === 'removed') {
        this.form.images = this.form.images.filter((i) => i !== file.response.data.url);
      }

      this.fileList = fileList;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    checkboxChange(e) {
      // console.log('gaibianla', e.target.checked);
      this.$emit('checkboxChange', e.target.checked);
    },
  },
};
</script>

<style scoped>
.form-container{
  width: 70%;
  margin: 0 auto;
}
</style>
